require.config({
    baseUrl: "./modules",
    paths: {
        jq: "../js/jquery",
        gd: "getData",
        cr: "cartRender",
        cl: "changeLocal",
        an: "allNum",
        ap: "allPrice"
    }
})
require(["jq", "gd", "cr", "cl", "an", "ap"], function(_, getData, abc, changeLocal, allNum, allPrice) {
    // 1. 获取本地数据
    let goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

    // 2. 根据本地数据，获取服务器数据
    goods.forEach(val => {
        getData({
            data: {
                type: "getDetail",
                id: val.id
            },
            success: res => {
                // 3. 渲染页面
                abc($("tbody"), res, val);
            }
        })
    })

    // 3. 事件委托绑定事件
    // 3-1.单个选中
    $("tbody").on("change", ".check", function() {
            const f = this.checked;
            const id = $(this).parent().parent().attr("index");
            changeLocal(goods, id, function(i) {
                goods[i].flag = Number(f);
            })

            // 根据单个选中决定是否全选
            $("#allCheck")[0].checked = goods.every(val => val.flag);

            // 计算总数量
            $("#allNum").html(allNum(goods));

            // 计算总价
            $("#allPrice").html(allPrice(goods));
        })
        // 3-2.修改数量
    $("tbody").on("input", ".setNum", function() {
            const id = $(this).parent().parent().attr("index");
            const num = Number($(this).val());
            changeLocal(goods, id, function(i) {
                goods[i].num = num;
            })

            // 计算总数量
            $("#allNum").html(allNum(goods));

            // 计算总价
            $("#allPrice").html(allPrice(goods));
        })
        // 3-3.删除商品
    $("tbody").on("click", ".del", function() {
            const id = $(this).parent().parent().attr("index");
            $(this).parent().parent().remove()
            changeLocal(goods, id, function(i) {
                goods.splice(i, 1);
            })

            // 根据单个选中决定是否全选
            $("#allCheck")[0].checked = goods.every(val => val.flag);

            // 计算总数量
            $("#allNum").html(allNum(goods));

            // 计算总价
            $("#allPrice").html(allPrice(goods));
        })
        // 4. 绑定全选事件
    $("#allCheck").change(function() {
        // 修改所有的复选框的选中状态
        for (let i = 0; i < $(".check").length; i++) {
            $(".check")[i].checked = this.checked;
        }
        // 修改所有数据的选中状态
        // goods.forEach(val=>{
        //     val.flag = Number(this.checked)
        // })
        // localStorage.setItem("goods",JSON.stringify(goods))

        localStorage.setItem("goods", JSON.stringify(goods.map(val => {
            val.flag = Number(this.checked)
            return val;
        })))

        // 计算总数量
        $("#allNum").html(allNum(goods));

        // 计算总价
        $("#allPrice").html(allPrice(goods));
    })

    // 5. 根据单个选中决定是否全选
    // $("#allCheck")[0].checked = goods.every(val => val.flag);

    // 6. 计算总数量
    $("#allNum").html(allNum(goods));

    // 7. 计算总价
    $("#allPrice").html(allPrice(goods));

    // 8. 绑定删除选中的事件
    $("#delFlag").click(function() {
        // 从程序中删除商品
        goods = goods.filter(val => {
                return !val.flag;
            })
            // 从本地数据中删除商品
        localStorage.setItem("goods", JSON.stringify(goods))
            // const acheck = document.querySelectorAll(".check")
            // for(let i=0;i<acheck.length;i++){
            //     if(acheck[i].checked){
            //         acheck[i].parentNode.parentNode.remove();
            //     }
            // }
            // 从DOM中删除商品
        $.each($(".check"), (idx, val) => {
            if (val.checked) {
                val.parentNode.parentNode.remove()
            }
        })
    })
})